<template>
  <div>
    <common-echarts :option="option"></common-echarts>
  </div>
</template>

<script>
import CommonEcharts from "@/components/echarts/echarts.vue";
// import * as echarts from "echarts";

export default {
  name: "TimelineEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    // 指定图表的配置项和数据
    option() {
      const { playInterval, title, rankData } = this;

      //排行颜色
      var colorListS1 = [];
      var colors = [];
      for (var i = 0; i < rankData.length; i++) {
        let colorListF1 = {};
        for (var n = 0; n < rankData[i].data.length; n++) {
          //每阶段内部循环
          var name = rankData[i].data[n].name; //排行榜上项目的名称
          colorListF1[name] = colors[n]; //排行榜上项目名称和对应的颜色，
          //其中每个排名位置的颜色不变
        }
        colorListS1[i] = colorListF1; //每次排行榜的数据字典放入总体的
        //列表中
      }

      let option = {
        title: {
          text: title,
        },
        baseOption: {
          animationDurationUpdate: playInterval * 1.5, // 数据更新动画时长
          animationEasingUpdate: "quinticInOut", // 数据更新动画的缓动效果
          // 时间轴相关参数
          timeline: {
            // show: false, // 隐藏时间轴
            axisType: "category", // 轴的类型
            orient: "vertical",
            autoPlay: true,
            loop: false, // 是否循环
            playInterval: playInterval, // 播放的速度
            left: 5,
            right: "82%",
            bottom: 10,
            height: 350,
            data: rankData.map((ele) => ele.date),
          },
          // 标题相关设置
          title: [
            {
              left: "center",
              top: "3%",
              textStyle: {
                fontSize: 25,
                color: "rgba(121,121,121,0.9)",
              },
            },
            {
              left: "right",
              top: "50%",
            },
          ],
          xAxis: [{}],
          yAxis: [{}],
          series: [
            // 图表相关设置
            {
              id: "bar",
              type: "bar", // 条形图
              barWidth: "20", // 条形图宽度
              tooltip: {
                show: true,
              },
              label: {
                normal: {
                  show: true,
                  position: "right",
                },
              },
              data: [],
            },
          ],
        },
        options: [],
      };

      var xMaxInterval = 5;
      for (let i = rankData.length - 1; i > 0; i--) {
        // 外循环
        var xMax = 20;
        if (rankData[i].data[0].value > 20) {
          // 当此排行中第一个数据大于20时
          xMax = "dataMax";
          // 取数据在该轴的最大值作为最大刻度
        }
        if (rankData[i].data[0].value / xMaxInterval >= 10) {
          // 减小最大间隔
          xMaxInterval = rankData[i].data[0].value / 5;
        }

        option.options.push({
          //   backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
          //     // 背景的径向渐变
          //     { offset: 0, color: "#f7f8fa" },
          //     { offset: 1, color: "#cdd0d5" },
          //   ]),
          title: {
            // 构造一个标题
            text: title + " " + rankData[i].category,
            color: "#f00",
          },
          xAxis: [
            {
              show: true,
              type: "value",
              // 强制设置坐标轴分割间隔
              interval: xMaxInterval,
              max: xMax,
              axisTick: {
                // show: false, // 坐标轴刻度
              },
              // 坐标轴刻度
              //   axisLabel: {},
              // 坐标轴线
              axisLine: {
                // show: false,
                lineStyle: {
                  color: "rgba(121,121,121,0.3)",
                },
              },
              // 坐标轴在grid区域的分隔线
              //   splitLine: {}
            },
          ],
          yAxis: [
            {
              type: "category",
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(121,121,121,0.3)",
                },
              },
              axisLabel: {
                show: false,
                textStyle: {},
              },
              data: rankData[i].data.map((ele) => ele.name),
            },
          ],
          series: [
            {
              id: "bar",
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList = [
                      "#0f4471",
                      "#00adb5",
                      "#ff5722",
                      "#5628b4",
                      "#20bf55",
                      "#f23557",
                    ];

                    return colorList[params.dataIndex];
                  },
                  label: {
                    show: true,
                    fontSize: 18,
                    position: "top",
                    formatter: "{c}%",
                  },
                  shadowBlur: 20,
                  shadowColor: "rgba(40,40,40,0.5)",
                },
              },
              label: {
                normal: {
                  position: "right",
                  formatter: function (p) {
                    return p.name + ":" + p.value;
                  },
                },
              },
              data: rankData[i].data.map((ele) => ele.value).sort((a, b) => a > b),
            },
          ],
        });
      }

      return option;
    },
  },
  data() {
    return {
      rankData: [
        {
          date: "2020-03-14",
          category: "2020-03-14",
          data: [
            { name: "A商品", value: 6509 },
            { name: "B商品", value: 4791 },
            { name: "C商品", value: 3447 },
            { name: "D商品", value: 2906 },
            { name: "E商品", value: 2611 },
          ],
        },
        {
          date: "2020-03-13",
          category: "2020-03-13",
          data: [
            { name: "A商品", value: 4874 },
            { name: "B商品", value: 3662 },
            { name: "D商品", value: 2431 },
            { name: "C商品", value: 2160 },
            { name: "E商品", value: 2101 },
          ],
        },
        {
          date: "2020-03-12",
          category: "2020-03-12",
          data: [
            { name: "A商品", value: 3751 },
            { name: "B商品", value: 3398 },
            { name: "D商品", value: 2129 },
            { name: "C商品", value: 2110 },
            { name: "E商品", value: 2088 },
          ],
        },
        {
          date: "2020-03-11",
          category: "2020-03-11",
          data: [
            { name: "A商品", value: 2642 },
            { name: "B商品", value: 2332 },
            { name: "D商品", value: 1095 },
            { name: "C商品", value: 1075 },
            { name: "E商品", value: 1063 },
          ],
        },
        {
          date: "2020-03-10",
          category: "2020-03-10",
          data: [
            { name: "B商品", value: 1345 },
            { name: "A商品", value: 1045 },
            { name: "D商品", value: 870 },
            { name: "C商品", value: 696 },
            { name: "E商品", value: 640 },
          ],
        },
      ],
      title: "商品累计销量情况",
      playInterval: 1000, // 播放间隔
    };
  },
  created() {},
};
</script>
